<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        thead{
            background-color: #ccc;
        }
        th,td{
            width: 100px;
            height: 40px;
            text-align: center;
        }
      </style>
</head>
<body>
    <h1>动态创建表格</h1>
    <table id="wrap" border="1">
        <thead>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
    <script src="js/common.js"></Script>
        <Script>
            var tb = my$("tb");
            var jihe = [
                {name:"李白",subject:"语文",score:139},
                {name:"杜甫",subject:"数学",score:129},
                {name:"王维",subject:"英语",score:120},
                {name:"孟浩然",subject:"物理",score:80},
                {name:"白居易",subject:"化学",score:80},
                {name:"刘禹锡",subject:"生物",score:80}
            ];
            for(var i = 0; i<jihe.length;i++){
                // 数组中的数据对应生成每个tr
                var tr = document.createElement("tr");
                // 将tr添加到tb中
                tb.appendChild(tr);
                // 添加一个变量,用来接收数组中的每一个对象
                var data = jihe[i]; //{name: "李白",subject: "语文",score: 139}
                // 想要给每个tr添加th,再将对象里的每一个数据添加给th
                for(var j in data ){
                // 对象里的每一个数据对应添加给th
                var th = document.createElement("th");
                tr.appendChild(th);
                th.innerText = data[j];
                }
                // 最后一个td添加a标签，再给a标签添加文字
                var th = document.createElement("th");
                tr.appendChild(th);
                var a = document.createElement("a");
                a.innerText="删除";
                a.href = "javascript:void(0)"
                th.appendChild(a);
                // a 点击时删除整行tr
                a.onclick = function(){
                    tb.removeChild(this.parentNode.parentNode);
                }

            } 

        </script>   
</body>
</html>